<template>
  <el-container>
    <el-aside width="180px" class="home-aside">
      <div style="display: flex;justify-content: flex-start;width: 180px;text-align: left;">
        <el-menu style="background: #ececec;width: 180px;" unique-opened router>
          <template v-for="(item,index) in this.routes" v-if="!item.hidden">
            <el-submenu :key="index" :index="index+''">
              <template slot="title">
                <i :class="item.iconCls" style="color: #20a0ff;width: 14px;"></i>
                <span slot="title">{{item.name}}</span>
              </template>
              <el-menu-item width="180px"
                            style="padding-left: 30px;padding-right:0px;margin-left: 0px;width: 170px;text-align: left"
                            v-for="child in item.children"
                            :index="child.path"
                            :key="child.path">{{child.name}}
              </el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </div>
    </el-aside>
  </el-container>
</template>
<script>
  export default {
    data() {
      return {}
    },
    computed: {
      routes() {
        return this.$store.state.routes
      }
    }
  }
</script>
